<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map demo</title>
    <link rel="stylesheet" href="js/lib/ol4.6.4/ol.css" type="text/css">
    <link rel="stylesheet" href="css/demo.css" type="text/css">
</head>
<body>
<div id="map">
</div>
<script src="js/lib/ol4.6.4/ol.js"></script>
<script src="js/lib/jquery/jquery-3.3.1.min.js"></script>
<script>
    var view = new ol.View({
        zoom: 4,
        center:ol.proj.transform([110, 39],"EPSG:4326", "EPSG:3857")
    });

    var map = new ol.Map({
        controls: ol.control.defaults({
            attribution: false
        }).extend([]),
        target: "map",
        layers: [
            getTdtLayer("vec_w"),
            getTdtLayer("cva_w")
        ],
        view: view
    });

    var vectorSource = new ol.source.Vector({
        url:"./data/capital.geojson",
        format: new ol.format.GeoJSON()
    });
    var vector = new ol.layer.Vector({
        source: vectorSource,
        style: function (feature) {
            return styleFunction(feature, false);
        }
    });
    map.addLayer(vector);

    var select = new ol.interaction.Select({
        // condition: ol.events.condition.pointerMove,
        layers:[vector],
        multi: true,
        style: function (feature) {
            return styleFunction(feature, true);
        }
    });
    map.addInteraction(select);
    select.on("select", function(e){
        console.log(e);
        var features = e.selected;
        if(features.length>0){
            var feature = features[0];
            console.log(feature.get("name"));
        }
    });

    map.on('pointermove', function(evt) {
        if(map.hasFeatureAtPixel(evt.pixel)){
            $(map.getTargetElement()).css("cursor", "pointer");
        }else{
            $(map.getTargetElement()).css("cursor", "default");
        }
    });

    function styleFunction(feature, isSelect) {
        var stroke = new ol.style.Stroke({
            color: 'black',
            width: 2
        });
        var fill = new ol.style.Fill({
            color: 'red'
        });
        var _name = "",
            _color = "#ccc";
        if(isSelect) {
            _name = feature.get("name");
            _color = "#f00";
        }
        return new ol.style.Style({
            stroke:stroke,
            fill: fill,
            image: new ol.style.Circle({
                radius: 8,
                fill: new ol.style.Fill({
                    color: _color
                })
            }),
            text: new ol.style.Text({
                text: _name,
                textAlign: "left",
                offsetX:12,
                font:"bold 13px sans-serif",
                fill: new ol.style.Fill({
                    color: 'red'
                }),
                stroke:new ol.style.Stroke({
                    color: 'white',
                    width: 2
                })
            })
        });
    }

    function getTdtLayer(lyr){
        var url = "http://t0.tianditu.com/DataServer?T="+lyr+"&X={x}&Y={y}&L={z}";
        var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url:url
            })
        });
        return layer;
    }
</script>
</body>
</html>